<template>
  <div class="top">
    <span class="logo"><img src="../../../../static/images/index/logo.png"></span>
    <a class="searchBtn" href="javascript:void(0)" v-text="title"></a>
    <span class="news"></span>
  </div>
</template>
<script>
  export default {
    name: 'topNav',
    data () {
      return {
        title: '测试版搜索商品'
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 .top{width: 100%;
   height: 44px;
   background: #824094;
   z-index: 20;
   top: 0;
   box-sizing: inherit;
   -moz-box-sizing: inherit;
   -webkit-box-sizing: inherit;
   position: fixed;
   left: 0;}
 .top .logo {
   float: left;
   width: 6%;
   margin: 9px 2% 0 5%;
   max-width: 22px;
 }
 .top .logo img {
   max-width: 22px;
 }
 .top .searchBtn {border:none;outline:none;width:70%;height:26px;margin-top:9px;margin-left:2%;border-radius:6px;-webkit-border-radius:6px;-moz-border-radius:6px;-ms-border:6px;background:#bd9ac4;text-align:center;line-height:26px;color:#824094;font-size:10px; display:block; float:left;text-decoration: none}
 .top .news {float:right;height:24px;background:url(../../../../static/images/index/news.png) no-repeat;width:5%; max-width:18px;background-size:100%;margin:14px 4% 0 0;position:relative;}
</style>
